@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
@import url("//unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css");

* {
    margin: 0;
    padding: 0;
}

/*浮动布局*/
.flex {
    display: flex;
}

/*换行*/
.warp {
    flex-wrap: wrap;
}

/*每个模块均匀分布*/
.space {
    justify-content: space-around;
}

/*左右两端分开布局*/
.between {
    justify-content: space-between;
}

/*居中*/
.center {
    justify-content: center;
}

/*绝对定位*/
.absoulet {
    position: absolute;
}

/*相对定位*/
.relative {
    position: relative;
}

/*固定定位*/
.flexd {
    position: fixed;
}

/*收缩框体*/
.padding-body {
    margin: 0;
    top: 0;
    left: 0;
    /* top: 10px; */
    width: 100%;
}

/* ****************************搜索框******************************/
.small_title {
    position: relative;
    width: 100%;
    height: 330px;
    color: white;
    line-height: 200px;
    text-align: center;
    z-index: 999;
    font-size: 30px;
    font-family: 幼体;
    font-weight: bold;
    min-width: 1400px;
    background-image: url(https://m.tuniucdn.com/fb2/t1/G6/M00/04/1A/Cii-U12mtSWISE9aAAPeRT8qQisAAAuYQBmpjEAA95d34.jpeg);
}

/*搜索框样式*/
.search {
    border: 0px white;
    border: none;
    /*去掉边框*/
    outline: 0;
    /*移除浏览器的默认聚焦样式*/
    border-radius: 20px;
    margin-left: 20px;
    width: 400rpx;
}

.search_div1 {
    border: none;
    line-height: 40px;
    text-align: center;
}

.search_div2 {

}

/*搜索框父级样式*/
.serach_body {
    border-radius: 12px;
    background-color: white;
    margin: 10px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
    line-height: 40px;
    text-align: center;
}

/*分割线*/
.line {
    width: 2px;
    height: 18px;
    font-size: 18px;
}

/*按钮样式*/
.searchBtn {
    background: #4db46a;
    width: 196px;
    min-width: 118px;
    height: 40px;
    line-height: 60px;
    margin: 10px;
    font-size: 18px;
    color: #fff;
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
    border-radius: 12px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*搜索框悬浮*/
.search_float {

}

.search_float2 {
    top: 0px;
    z-index: 999;
    position: fixed;
    padding: 10px;
    line-height: 60px;
    display: flex;
    width: 100%;
    background-color: #e0eaf2;
    -webkit-animation: SlideDown .3s ease-in-out;
    animation: SlideDown .3s ease-in-out;
    -webkit-transition: background-color .4s ease-in-out;
    transition: background-color .4s ease-in-out;
}

.selectCity {
    width: 440px;
    /* height: 120px; */
    top: 267px;
    z-index: 999;
    position: absolute;
    font-weight: 400;
    font-size: 14px;
    color: #2dbb55;
    background-color: white;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}

/*三角形*/
.single {
    width: 0px;
    height: 0px;
    border: 10px solid #000;
    border-top-color: transparent;
    border-bottom-color: white;
    border-left-color: transparent;
    border-right-color: transparent;
    position: absolute;
    top: -16px;
    left: 20px;
}

/*城市*/
.city>#city_arr {
    list-style: none;
}


#city_arr>ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.cloor_green {
    color: #2dbb55;
}

#city_arr>ul>li>a {
    color: black;
}


#city_arr>ul>li>a:hover {
    color: #60ca6e;
}

/*区域*/
#localArea {
    display: flex;
    /* justify-content: space-around; */
}

#localArea>ul {
    list-style: none;
}


/*日期选择器*/




/* **********************调上下左右编剧*************************/
.margin-top {
    margin-top: 10px;
}

.margin-top2 {
    margin-top: 16px;
}

.margin-left {
    margin-left: 10%;
}

.margin-left2 {
    margin-left: 50px;
}

.margin-left1 {
    margin-left: 20px;
}

.margin-left_logo {
    margin-left: 10%;
}

.margin-left_select {
    margin-left: 7px;
}
/* ****************************导航******************************/

/*导航*/
header {
    background-color: #2dbb55;
    color: white;
    margin: 0 auto;
    vertical-align: middle;
    min-width: 1400px;
}

header a {
    margin-right: 10px;
}


/*先找到header，再找到logo*/
header a .logo {
    width: 140px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-top: 4px;
}


/*导航字体*/
.header_font {
    font-size: 16px;
    font-family: initial;
}

/*后代选择器*/
#navitems ul {
    /* 去除小黑点 */
    list-style: none;
    display: flex;
}

#navitems ul li {
    width: 80px;
    height: 50px;
    line-height: 50px;
    /*垂直居中*/
    text-align: center;
    /*水平居中*/
}

#navitems ul li a {
    display: block;
    /*区块化*/
    color: white;
    text-decoration: none;
}

#navitems ul li:nth-child(2):after {
    display: block;
    width: 16px;
    height: 16px;
    content: "hot";
    color: white;
    background-color: red;
    position: relative;
    left: 50px;
    top: -46px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    border-radius: 5px;
}

#navitems ul li:nth-last-child(4):after {
    display: block;
    width: 16px;
    height: 16px;
    content: "hot";
    color: white;
    background-color: red;
    position: relative;
    left: 46px;
    top: -46px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    border-radius: 5px;
}

#navitems ul li a:hover {
    font-weight: bold;
    background-color: rgb(80, 251, 137);
    color: white;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
}

/*第一个子元素*/
#navitems ul li:first-child {
    /* background-color: aquamarine; */
}

/*最后一个子元素*/
#navitems ul li:last-child {
    /* background-color: rgb(71, 223, 94); */
}

/*第n个子元素*/
#navitems ul li:nth-child(2) {
    /*从1开始*/
    /* background-color: rgb(160, 115, 237); */
}

/*倒数第n个元素*/
#navitems ul li:nth-last-child(2) {
    /*倒数第2个*/
    /* background-color: bisque; */
}

/*直接第一层子元素*/
.par>span {
    /* color: darkorange; */
}

/*下一个兄弟元素*/
.s1 span+label+label {
    /* font-size: 30px; */
}

/*属性选择器*/
input[type="password"] {
    /* color: green; */
}

/*伪类*/
a {
    color: black;
    text-decoration: none;
}

a:hover {
    /*鼠标悬浮*/
    font-weight: bold;
    /*加粗*/
    text-decoration: none;
    color: #000;
}

/*被点击后的样式*/
a:visited {
    /* color: yellow; */
}

/*伪元素*/
.hot_pro {
    display: block;
    width: 60px;
    height: 40px;
    text-decoration: none;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: white;
    background-color: rgb(235, 177, 97);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
}

.hot_pro::after {
    display: block;
    content: "hot";
    width: 16px;
    height: 16px;
    color: white;
    background-color: red;
    position: relative;
    /*相对定位*/
    left: 48px;
    top: -48px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    border-radius: 5px;
}

/* ***************轮播图********************/
/*swiper轮播插件样式*/
.swiper {
    width: 100%;
    height: 100%;
    --swiper-pagination-color: #f1f5f2;
    /* 分页颜色*/
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 10px;
}

.swiper-slide img {
    display: block;
    width: 560px;
    height: 360px;
    object-fit: cover;
    border-radius: 10px;
}


/*隔开*/

.swiper_title {
    font-size: 20px;
    font-weight: 800;
    font-family: 微软雅黑;
}

.swiper_body {
    padding: 18px 18%;
}


.demo {
    width: 560px;
    height: auto;
    margin: 0px auto;
    overflow: hidden;
    /*用于隐藏超出展示容器的内容部分*/
    border-radius: 10px;
    margin-top: 10px;
}

.demo1 {
    width: 560px;
    height: auto;
    margin: 0px auto;
    animation: text 10s infinite linear;
    font-size: 0px;
    /*消除图片间隔*/
    border-radius: 10px;
    margin-top: 10px;

}

/* ***************秒杀活动*****************/
.active_spilk {
    background-color: #ff5858;
    color: white;
    width: 120px;
    height: 100px;
    border-radius: 8px;
    /* line-height: 80px; */
    /* text-align: center; */
}

#spilck_ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    background-color: rgb(238, 235, 235);
    border-radius: 10px;
}

#spilck_ul>li {
    display: block;
    width: 200px;
    height: 100px;
    cursor: pointer;
}


.spilk_time {
    margin-left: 20px;
    margin-right: 20px;
    color: #ff5858;
    padding: 2px;
    font-size: 12px;
    font-family: 微软雅黑;
    border-radius: 2px;
    margin-top: 15px;
    background-color: white;
    /* text-align: center;
    line-height: 12px; */
}

.spilk_time_item {
    /* width: 18px;
    height: 20px;
    background-color: white;
    border-radius: 2px;
    line-height: 20px;
    text-align: center; */
}

.timer {
    margin-left: 8px;
    font-size: 15px;
    font-weight: 400;
}

/*优惠券*/
.tricket {
    font-size: 13px;
    font-family: 微软雅黑;
}

#spilck_ul {
    
}

#spilck_ul>li {
    margin-right: 20px;
}

.cursor {
    cursor: not-allowed;
}

.tricket_head {
    color: white;
    height: 70px;
    width: 100px;
    line-height: 70px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    margin-left: 5px;
    padding-right: 10px;
    margin-top: 15px;
}
.tricket_head_common {
    background-color: #ff9d00;
}

.tricket_head_qiang {
    background-color: #ccc;
}

.tricket_head_price {
    font-size: 16px;
}

.tricket_head_price_zhe {
    margin-top: 2px;
    margin-left: 2px;
    font-size: 8px;
}

.tricket_body {
    background-color: white;
    color: black;
    height: 70px;
    width: 260px;
    border-radius: 10px 10px 10px 10px;
    margin-top: 15px;
    padding: 0 10px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
}

.tricket_body_date {
    margin-top: 10px;
    font-size: 6px;
    color: gray;
}

.tricket_name {
    margin-top: 10px;
}

.ticket_spilck_qiang {
    color: white;
    font-size: 10px;
    position: absolute;
    display: flex;
    padding: 2px 4px;
    margin-top: 30px;
    margin-left: 110px;
    margin-bottom: 30px;
    border-radius: 4px 0 4px 0;
}

.ticket_spilck_qianged {
    background-color: #ccc;
}

.ticket_spilck_noqiang {
    background-color: #ff9d00;
}

.ticket_spilck_qiang>a {
    color: white;
}

.ticket_spilck_qiang>a:hover {
    color: white;
}

.past_qiang {
    background-color: gray;
}

.active_style {
    margin-top: 20px;
    margin-left: 12px;
    width: 200px;
}

.jian {
    margin: 40px 0 0 6px;
}

.jian>a {
    background-image: url(../img/箭头\ 右.png);
}

.jian>a:hover {
    background-image: url(../img/箭头\ 洋.png);
}


/* *******************酒店热销榜*************/
#hot_hotel {
    margin-top: -10px;
    width: 400px;
    margin-left: 20px;
    overflow: hidden;
    border-radius: 6px;
    padding: 10px 20px;
}

#hot_hotel>.swiper-slide {
    transform: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

#hot_hotel>.swiper-slide>ul {
    width: 100%;
    height: auto;
    list-style: none;
    flex-wrap: wrap;
    border-radius: 8px;
}

#hot_hotel>.swiper-slide>ul>li {
    background-color: #f6f6f6;
    margin-bottom: 10px;
    border-radius: 8px;
    height: 100px;
}



.jian_bot {
    /* margin-left: 5px; */
}

.hot_jian {
    width: 16px;
    height: 16px;
}

.hot_hotel_img_box {
    width: 150px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 6px;
    margin-right: 50px;
}

.hot_hotel_img {
    width: 100%;
    height: 80px;
}

.first {
    width: 60px;
    text-align: center;
    font-size: 38px;
    color: #ccc;
    line-height: 38px;
    font-weight: 700;
}

.second {
    font-weight: bolder;
    width: 100%;
    height: 15px;
    font-size: 16px;
    color: #383838;
    line-height: 15px;
    margin-bottom: 12px;
    overflow: hidden;
    margin-left: -12px;
}

.thread {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
}

.four {
    font-size: 16px;
    color: white;
    background-color: #ff5858;
    padding: 1px 2px;
    border-radius: 4px;
    font-weight: 800;
}

.five {
    color: #ff5858;
    font-size: 14px;
    margin-left: 4px;
    margin-top: 4px;
}


.money {
    font-size: 12px;
    font-weight: bolder;
    margin-top: 3px;
}

.money_num {
    font-size: 18px;
    font-weight: bold;
}

.money_qi {
    font-size: 10px;
    font-weight: 400;
    margin-top: 6px;
    margin-left: 4px;
}

/* *******************夏日游玩****************/
#introduce_place {
    margin-top: 20px;
    background-color: #e0eaf2;
}

#introduce_place_ul {
    list-style: none;
}

.swiperBox {
    width: 100%;
    height: 140px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    width: 200px;
    height: 100px;
    justify-content: center;
    align-items: center;
    transform: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
}


.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ******************酒店星推荐*****************/
.good_recommend {
    width: 100%;
    height: auto;
    background-color: white;
}

.hotel_xing {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    padding: 20px;
}
/* 
.hotel_xing>a:hover {
    font-weight: bolder;
    color: #60ca6e;
} */

.bg_color2 {
    padding-top: 20px;
    color: white;
    width: 360px;
    height: 160px;
    background: rgba(0, 0, 0, .4);
    border-radius: 12px;
    position: relative;
    top: 0;
    /* margin-right: 40px; */
}

/* *******************主题酒店推荐****************/
.hotel_thim {
    padding: 0 18% 60px 18%;
}

#hotel_tipoc {
    margin-top: 20px;
}

#hotle_tipoc_ul {
    list-style: none;
}

#hotle_tipoc_ul>li {
    height: 300px;
    margin: 0px 26px;
    width: 200px;
}

.hotel_bg {
    width: 200px;
    background-size: 100% 100%;
    height: 300px;
    border-radius: 8px;
    padding: 20px;
}

.hotel_bg_img1 {
    background: rgba(0, 0, 0, 0) url("https://m.tuniucdn.com/fb2/t1/G6/M00/05/F7/Cii-TF2phVWIGUYVAAXiIljWMXkAAA9-wFu7b8ABeI699.jpeg")no-repeat scroll center center / cover;
}

.hotel_bg_img2 {
    background: rgba(0, 0, 0, 0) url("https://m2.tuniucdn.com/fb2/t1/G6/M00/02/82/Cii-TF2kGHKID3DvAAONEaR4GZgAAAedwFYbBAAA40p73.jpeg")no-repeat scroll center center / cover;
}

.hotel_bg_img3 {
    background: rgba(0, 0, 0, 0) url("https://m2.tuniucdn.com/fb2/t1/G3/M00/C7/6A/Cii_Ll2MadWIL9TPAADI0Jjt3TMAAI1wwIbv74AAMjo74.jpeg")no-repeat scroll center center / cover;
}

.hotel_bg_img4 {
    background: rgba(0, 0, 0, 0) url("https://m.tuniucdn.com/fb2/t1/G4/M00/E2/1F/Cii-VV2MadSIDWB_AAFiV3EjK-4AAK-pgP7oWMAAWJv33.jpeg")no-repeat scroll center center / cover;
}

.hotel_bg_title {
    font-size: 20px;
    color: white;
    font-weight: 800;
    font-family: 微软雅黑;
}

.hotel_bg_text {
    font-size: 14px;
    color: white;
    font-family: 幼体;
}


/* ******************品牌旗舰店*******************/
#pimc_body {
    padding: 0 18%;
}

.pimc {
    width: 500px;
    background-size: 100% 100%;
    height: 120px;
    border-radius: 8px;
    color: white;
    line-height: 120px;
    text-align: center;
    margin-right: 50px;
    font-size: 20px;
    font-family: 微软雅黑;
    font-weight: 800;
}

.pimc_bg1 {
    background: rgba(0, 0, 0, 0) url("https://m1.tuniucdn.com/fb2/t1/G6/M00/00/C7/Cii-TF2gTkGINgWgAAGJTKt0P_oAAAJ5gHFz48AAYlk37.jpeg")no-repeat scroll center center / cover;
}

.pimc_bg2 {
    background: rgba(0, 0, 0, 0) url("https://m1.tuniucdn.com/fb2/t1/G6/M00/00/C7/Cii-U12gTmKIMzHHAAEvLO35LOwAAAJ5gOyBnkAAS9E18.jpeg")no-repeat scroll center center / cover;
}

#pimc_logo::after {
    display: block;
    width: 60px;
    height: 16px;
    content: "品牌直销";
    color: white;
    background-color: #4db46a;
    position: relative;
    left: 10px;
    top: -106px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    border-radius: 4px;
    background: #4db46a;
    padding: 1px;
}

.bg_color {
    color: white;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    border-radius: 12px;
    position: relative;
    top: 0;
}

/* *************合作品牌****************/
.cooperation {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 100px;
}

.cooperation>ul {
    width: 100%;
    list-style: none;
}

.cooperation>ul>li {
    background-color: #f6f6f6;
    border-radius: 12px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

.cooperation>ul>li>a>img {
    width: 100px;
    height: 80px;
    margin-top: 10px;
}

/* *****************底部******************/
footer {
    background-color: #f5f5f5;
}

footer>.footer_body {
    padding: 0 18%;
}

.footer_body>ul {
    list-style: none;
    padding: 0 20px;
}

.footer_body>ul>li {
    width: 160px;
}

.footer_logo {
    display: flex;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.footer_img {
    width: 40px;
    height: 40px;
}

.footer_img>img {
    width: 40px;
    height: auto;
}

.footer_font {
    font-size: 16px;
    font-family: 幼体;
    font-weight: 800;
    margin-top: 6px;
    margin-left: 6px;
}

.footer_bot_body {
    font-size: 12px;
    color: gray;
    margin-top: 20px;
    font-family: 幼体;
}


.footer_li_text {
    margin: 4px;
}

.canvas {
    width: 90px;
    height: auto;
}

.canvas>img {
    width: 90px;
    height: auto;
}

/* ******************底部css*****************/
.footer_bot {
    background-color: #60ca6e;
    width: 100%;
    height: 62px;
    /* line-height: 62px; */
    display: flex;
    justify-content: space-around;
}

.footer_bot_img {
    width: 30px;
    height: auto;
}

.zhuzhu {
    margin-top: 16px;
}

.footer_text {
    margin-top: 20px;
    margin-left: 6px;
    font-size: 18px;
    font-weight: 800;
    font-family: 微软雅黑;
    color: white;
}
